<template>
  <div class="pagination">
    <el-pagination
      background
      :page-sizes="pageSizes"
      :page-size.sync="size"
      :current-page.sync="current"
      :layout="layout"
      :total="total"
      :disabled="disabled"
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      :small="small"
      class="right"
    >
    </el-pagination>
  </div>
</template>

<script lang="ts" setup>
import { reactive, computed } from "vue";
// 自定义事件
const emit = defineEmits(["pagination"]);
// 接受props
const props = defineProps({
  //每页显示条数
  pageSize: {
    type: Number,
    default: 10,
  },
  //默认在第几页
  currentPage: {
    type: Number,
    default: 1,
  },
  //总条数
  total: {
    type: Number,
    default: 0,
  },
  //每页可选显示条数
  pageSizes: {
    type: Array<number>,
    default: () => {
      return [10, 20, 50, 100];
    },
  },
  //分页布局设计
  layout: {
    type: String,
    default: "total, sizes, prev, pager, next, jumper",
  },
  disabled: {
    type: Boolean,
    default: false,
  },
  small: {
    type: Boolean,
    default: false,
  },
});

let pageData = reactive({
  pageSize: props.pageSize,
  currentPage: props.currentPage,
});

const handleSizeChange = (val: number) => {
  pageData.pageSize = val;
  emit("pagination", pageData);
};
const handleCurrentChange = (val: any) => {
  pageData.currentPage = val;
  emit("pagination", pageData);
};

// 当前页数
const current = computed({
  get() {
    return props.currentPage;
  },
  set(val) {
    emit("pagination", { currentPage: val, pageSize: props.pageSize }); //改变当前为第几页的值赋值给父组件
  },
});
// 每页显示条
const size = computed({
  get() {
    return props.pageSize;
  },
  set(val) {
    emit("pagination", { pageSize: val, currentPage: props.currentPage }); //改变当前页显示几条数据的值赋值给父组件
  },
});
</script>
<style lang="scss" scoped>
.right {
  float: right;
  padding: 15px;
}
</style>
